<template>
	<view class="container" v-if="userInfo.user_id">
		<view class="account-panel dis-flex flex-y-center">
			<view class="panel-lable"><text>账户余额</text></view>
			<view class="panel-balance flex-box">
				<text>￥{{ userInfo.balance }}</text>
			</view>
		</view>
		<view class="recharge-panel">
			<view class="recharge-label"><text>充值金额</text></view>
			<view class="recharge-plan clear">
				<block v-for="(item, index) in planList" :key="index">
					<view class="recharge-plan_item " :class="{ active: selectedPlanId == item.plan_id }" @tap="onSelectPlan" :data-id="item.plan_id">
						<view class="plan_money">
							<text>{{ item.money }}</text>
						</view>
						<view class="plan_gift" v-if="item.gift_money > 0">
							<text>送{{ item.gift_money }}</text>
						</view>
					</view>
				</block>
			</view>
			<!-- 手动充值输入框 -->
			<view class="recharge-input" v-if="setting.is_custom == '1'"><input @input="bindMoneyInput" type="digit" placeholder="请输入充值金额" v-model="inputValue" /></view>
			<!-- 确认按钮 -->
			<view class="recharge-submit btn-submit">
				<form @submit="onSubmit" report-submit="true"><button formType="submit" :disabled="disabled">立即充值</button></form>
			</view>
		</view>
		<!-- 充值描述 -->
		<view class="recharge-describe">
			<view class="recharge-label"><text>充值说明</text></view>
			<view class="content">
				<text space="ensp">{{ setting.describe }}</text>
			</view>
		</view>
		<!-- 支付方式弹窗 -->
		<popup :show="showPayPopup" @close="onTogglePayPopup">
			<view class="pop-orderPay pop-example__container">
				<view class="pop-title"><text class="f-30">请选择支付方式</text></view>
				<view class="pop-content">
					<view class="pay-method">
						<form @submit="onSelectPayType" :data-value="PayTypeEnum.WECHAT.value" report-submit="true" v-if="paymentChannel.WECHAT">
							<button formType="submit" class="btn-normal">
								<view class="pay-item dis-flex flex-x-between">
									<view class="item-left dis-flex flex-y-center">
										<view class="item-left_icon wechat"><text class="iconfont icon-weixinzhifu"></text></view>
										<view class="item-left_text">
											<text>{{ PayTypeEnum.WECHAT.name }}</text>
										</view>
									</view>
								</view>
							</button>
						</form>
						<form @submit="onSelectPayType" :data-value="PayTypeEnum.ALIPAY.value" report-submit="true" v-if="paymentChannel.ALIPAY">
							<button formType="submit" class="btn-normal">
								<view class="pay-item dis-flex flex-x-between">
									<view class="item-left dis-flex flex-y-center">
										<view class="item-left_icon alipay"><text class="iconfont icon-zhifubao"></text></view>
										<view class="item-left_text">
											<text>{{ PayTypeEnum.ALIPAY.name }}</text>
										</view>
									</view>
								</view>
							</button>
						</form>
					</view>
				</view>
			</view>
		</popup>
	</view>
</template>

<script>
import PayTypeEnum from '@/utils/enum/order/PayType';
import RechargeTypeEnum from '@/utils/enum/recharge/order/RechargeType.js';
import popup from '@/components/popup/index.vue';
import Payment from '@/utils/Payment.js';
import Tools from '@/utils/Tools.js';
import Route from '@/utils/Route.js';
export default {
	components: { popup },
	data() {
		return {
			userInfo: {}, // 用户信息
			setting: {}, // 充值设置

			// recharge_type: '', // 充值类型
			selectedPlanId: 0, // 当前选中的套餐id
			inputValue: '', // 自定义金额
			PayTypeEnum,
			disabled: false, //按钮禁用
			planList: [],
			showPayPopup: false,
			paymentChannel: {},
			authId: null
		};
	},
	onLoad() {
		const paymentFilter = Payment.filter();
		this.paymentChannel = paymentFilter.paymentChannel;
		this.authId = uni.getStorageSync('authId') || null;
	},
	onShow() {
		this.getRechargeIndex();
	},
	methods: {
		/**
		 * 获取充值中心数据
		 */
		getRechargeIndex() {
			this.$get(this.$api.getRechargeIndex, {}, res => {
				this.planList = res.data.planList;
				this.setting = res.data.setting;
				this.userInfo = res.data.userInfo;
			});
		},
		/**
		 * 选择充值套餐
		 */
		onSelectPlan(e) {
			this.selectedPlanId = e.currentTarget.dataset.id;
			this.inputValue = '';
		},
		/**
		 * 绑定金额输入框
		 */
		bindMoneyInput(e) {
			this.selectedPlanId = 0;
		},
		/**
		 * 立即充值
		 */
		onSubmit(e) {
			this.onTogglePayPopup();
			return false;
			// let _this = this;

			// 记录formid
			this.$saveFormId(e.detail.formId);
		},
		onSelectPayType(e) {
			this.recharge(e.currentTarget.dataset.value);
			this.onTogglePayPopup();
		},
		/**
		 * 充值
		 */
		recharge(pay_type) {
			wx.showLoading({
				title: '正在处理...'
			});
			// 按钮禁用
			this.disabled = true;
			const postData = {
				planId: this.selectedPlanId,
				customMoney: this.inputValue,
				return_url: Tools.getSite() + '/pages/user/index',
				pay_type
			};
			if (this.authId) {
				this.$set(postData, 'id', this.authId);
			}
			// 提交到后端
			this.$post(
				this.$api.submitRecharge,
				postData,
				res => {
					Payment.pay(
						res.data.payment,
						pay_type,
						() => {
							this.redirectToUserIndex();
						},
						msg => {}
					);
				},
				false,
				() => {
					// 解除禁用
					this.disabled = false;
					uni.hideLoading();
				}
			);
		},
		/**
		 * 显示/隐藏支付方式弹窗
		 */
		onTogglePayPopup() {
			this.showPayPopup = !this.showPayPopup;
		},
		/**
		 * 跳到个人中心
		 */
		redirectToUserIndex() {
			Route.navigateTo({ url: '/pages/user/index' });
		}
	}
};
</script>

<style>
page,
.container {
	background: #fff;
}
.container {
	padding-bottom: 70rpx;
} /* 账户面板 */
.account-panel {
	width: 650rpx;
	height: 180rpx;
	margin: 50rpx auto;
	padding: 0 60rpx;
	box-sizing: border-box;
	border-radius: 12rpx;
	color: #fff;
	background: linear-gradient(-125deg, #a46bff, #786cff);
	box-shadow: 0 5px 22px 0 rgba(0, 0, 0, 0.26);
}
.panel-lable {
	font-size: 32rpx;
}
.recharge-label {
	color: rgb(51, 51, 51);
	font-size: 28rpx;
	margin-bottom: 25rpx;
}
.panel-balance {
	text-align: right;
	font-size: 46rpx;
}
.recharge-panel {
	margin-top: 60rpx;
	padding: 0 60rpx;
} /* 充值套餐 */
.recharge-plan .recharge-plan_item {
	width: 192rpx;
	padding: 15rpx 0;
	float: left;
	text-align: center;
	color: #888;
	border: 1rpx solid rgb(228, 228, 228);
	border-radius: 10rpx;
	margin: 0 20rpx 20rpx 0;
}
.recharge-plan .recharge-plan_item:nth-child(3n + 0) {
	margin-right: 0;
}
.recharge-plan .recharge-plan_item.active {
	color: #786cff;
	border: 1rpx solid #786cff;
}
.recharge-plan .recharge-plan_item.active .plan_money {
	color: #786cff;
}
.plan_money {
	font-size: 32rpx;
	color: rgb(82, 82, 82);
}
.plan_gift {
	font-size: 25rpx;
}
.recharge-input {
	margin-top: 25rpx;
} /* 立即充值 */
.recharge-input input {
	border: 1rpx solid rgb(228, 228, 228);
	border-radius: 10rpx;
	padding: 15rpx 16rpx;
	font-size: 26rpx;
}
.recharge-submit {
	margin-top: 70rpx;
}
.btn-submit button {
	font-size: 30rpx;
	background: #786cff;
	border: none;
	color: white;
	border-radius: 50rpx;
	padding: 0 120rpx;
	line-height: 3;
}
.btn-submit button[disabled] {
	background: #a098ff;
	border-color: #a098ff;
	color: white;
} /* 充值说明 */
.recharge-describe {
	margin-top: 50rpx;
	padding: 0 60rpx;
}
.recharge-describe .content {
	font-size: 26rpx;
	line-height: 1.6;
	color: #888;
}
/* 弹出层：支付方式 */

.pop-orderPay .pop-title {
	text-align: left;
}

.pay-method .pay-item {
	padding: 20rpx 0;
	font-size: 28rpx;
	/* border-bottom: 1rpx solid rgb(248, 248, 248); */
}

.pay-method .pay-item .item-left_icon {
	margin-right: 20rpx;
	font-size: 32rpx;
}

.pay-method .pay-item .item-left_icon.wechat {
	color: #00c800;
}

.pay-method .pay-item .item-left_icon.balance {
	color: #ff9700;
}
.pay-method .pay-item .item-left_icon.alipay {
	color: #0093e2;
}
.pop-example__container {
	background: #fff;
	padding: 30rpx 40rpx;
	border-radius: 10rpx;
	min-width: 460rpx;
}

.pop-example__container .pop-title {
	text-align: center;
}

.pop-content {
	margin-top: 30rpx;
}
</style>
